<!--
 * @Author: 宋杰
 * @Date: 2021-03-16 21:32:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-16 22:49:54
 * @Description: 一家十一口(猜一字) 运营智慧数据可视化
-->
<template>
  <div class="DP_Box">
    <dv-full-screen-container class="DP_background">
      <!-- 加载 -->
      <dv-loading v-if="loading">Loading...</dv-loading>
      <!-- 页面内容 -->
      <div v-else class="ZHPT_Box">
        <!-- 浮动的标签 -->
        <div class="FD_title">
          <!-- 左侧 -->
          <!-- <div class="FD_title_left">智慧平台</div> -->
          <!-- 右侧 -->
          <div class="FD_title_right">
            <img :src="require('../../assets/img/jsyh.png')" alt="" />
            <div>运营智慧数据可视化</div>
            <!-- <div>2020年11月20日 12:30:39</div> -->
          </div>
        </div>
        <!-- 浮动的标签 end-->

        <!-- 内容 -->
        <div class="ZHPT_Con">
          <!-- 左边 -->
          <div class="Con_leftBox">
            <!-- 上-->
            <div class="Con_leftBox_lunbo">
              <My-firstLeft />
            </div>
            <!-- 下 -->
            <div class="Con_leftBox_huaxinag">
              <My-ZHYYleftbottm />
            </div>
          </div>
          <!-- 右边 -->
          <div class="Con_rightBox">
            <div>
              <My-FirstRight />
            </div>
            <div>
              <My-ZHYYrightbottom />
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import firstLeft from "./firstLeft.vue"; //左上
import ZHYYleftbottm from "./ZHYYleftbottm.vue"; //左下

import FirstRight from "./FirstRight.vue"; //右1
import ZHYYrightbottom from "./ZHYYrightbottom.vue"; //右2
export default {
  // 组件
  components: {
    "My-firstLeft": firstLeft,
    "My-ZHYYleftbottm": ZHYYleftbottm,

    "My-FirstRight": FirstRight,
    "My-ZHYYrightbottom": ZHYYrightbottom,
  },
  name: "",
  data() {
    return {
      loading: true, //加载
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.cancelLoading(); //加载
  },
  //方法集合
  methods: {
    //加载
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
// 最外层盒子
.DP_Box {
  width: 100%;
  height: 100vh;
}

// 背景盒子
.DP_background {
  padding: 0.2rem;
  background-image: url("../../assets/pageBg.png");
  background-size: cover;
  background-position: center center;
}

// 页面内容
.ZHPT_Box {
  position: relative;
  width: 100%;
  height: 100%;
  // background: rgba($color: #ffffff, $alpha: 0.3);
}

// 头部标签
.FD_title {
  position: absolute;
  top: 0;
  height: 0.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background: rgba($color: #ffffff, $alpha: 0.5);
  // // 左侧
  // .FD_title_left {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   font-family: PingFangSC-Regular;
  //   font-size: 0.3rem;
  //   color: #ffffff;
  //   letter-spacing: 0.03rem;
  //   padding-left: 0.3rem;
  //   height: 100%;
  //   width: 7.5rem;
  //   background: linear-gradient(
  //     90deg,
  //     rgba(43, 118, 255, 0.8) 0%,
  //     rgba(108, 142, 255, 0) 100%
  //   );
  // }
  // 右侧
  .FD_title_right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    > img {
      height: 0.5rem;
      margin-right: 0.15rem;
    }
    > :nth-child(2) {
      font-family: PingFangSC-Regular;
      font-size: 0.35rem;
      line-height: 0.5rem;
      color: #ffffff;
      letter-spacing: 0.0175rem;
      text-align: center;
      margin-right: 0.2rem;
    }
    // > :nth-child(3) {
    //   font-family: PingFangSC-Regular;
    //   font-size: 0.25rem;
    //   color: #ffffff;
    //   letter-spacing: 0.0125rem;
    //   text-align: center;
    //   align-self: flex-end;
    //   line-height: 0.3rem;
    // }
  }
}
// 头部标签 end

// 内容
.ZHPT_Con {
  position: relative;
  // 布局 分左 中 右
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;
  // 左
  > :nth-child(1) {
    flex: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  // 右
  > :nth-child(2) {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // background: rgba($color: #ffffff, $alpha: 0.4);
  }

  // 左
  .Con_leftBox {
    > :nth-child(1) {
      margin-bottom: 0.1rem;
    }
    > :nth-child(2) {
      margin-top: 0.1rem;
    }
    // 实时放、还款信息
    .Con_leftBox_lunbo {
      width: 95%;
      height: 50%;
      // background: rgba($color: #f87d7d, $alpha: 0.4);
    }
    // 用户画像
    .Con_leftBox_huaxinag {
      width: 95%;
      height: 50%;
      // background: rgba($color: #a4f87d, $alpha: 0.4);
      // border:5px solid rgba($color: #a4f87d, $alpha: 0.4);
    }
  }

  // 右
  .Con_rightBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    // border:5px solid rgba($color: #a4f87d, $alpha: 0.4);
    > div {
      flex: 1;
      width: 95%;
      // border:5px solid rgba($color: #a4f87d, $alpha: 0.4);
    }
    > :nth-child(1) {
      margin-bottom: 0.1rem;
    }
    > :nth-child(2) {
      margin-top: 0.1rem;
    }
  }
}
</style>
